<template>
  <div>
    <SearchContainer @reset="() => formRef.resetFields()" @search="getData">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="dateRange" label="手术日期" class="w-[300px]">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item name="ssmc" label="手术名称" class="ml-2 w-[280px]">
          <a-input v-model:value="formState.ssmc" placeholder="请输入" />
        </a-form-item>
        <a-form-item name="zjm" label="" class="ml-2 w-[220px]">
          <a-input v-model:value="formState.zjm" placeholder="姓名/助记码/住院号" />
        </a-form-item>
        <a-form-item name="anaesCdoe" label="麻醉方式" class="ml-2 w-[260px]">
          <SelectItem v-model:value="formState.anaesCdoe" type="DT00012" placeholder="请选择" allow-clear />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex justify-end">
        <a-button class="mb-2" @click="onAdd"> 导出 </a-button>
      </div>
      <BaseTable :columns="columns" :loading="loading" :data-source="tableData" fill :scroll="{ x: 3200 }" :extra-height="40" :pagination="pagination">
        <!-- 自定义表头 -->
        <template #headerCell="{ column }">
          <div v-if="column.subTitle" class="-m-2">
            <div class="border-b p-2">{{ column.title }}</div>
            <div class="p-2">{{ column.subTitle }}</div>
          </div>
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex === 'xh'"> {{ index + 1 }} </template>
          <!-- 0未安排 1已安排(待转入) 2作废 3待手术(已转入) 4手术中 5已手术(待转出) 6已转出 -->
          <template v-if="column.dataIndex === 'status'">
            <span v-if="record.status == '0'">未安排</span>
            <span v-else-if="record.status == '1'">已安排</span>
            <span v-else-if="record.status == '2'">作废</span>
            <span v-else-if="record.status == '3'">待手术</span>
            <span v-else-if="record.status == '4'">手术中</span>
            <span v-else-if="record.status == '5'">已手术</span>
            <span v-else-if="record.status == '6'">已转出</span>
            <span v-else>-</span>
          </template>
          <template v-if="column.dataIndex === 'tc'"> {{ index + 1 }} </template>
          <template v-if="column.dataIndex === 'partNameList'"> {{ bwFormat(record.partNameList) }} </template>
          <template v-if="column.dataIndex === 'action'"> <a-button size="small" type="link" @click="onEdit(record)">编辑</a-button> </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>
<script setup>
import { h, ref } from 'vue'
import dayjs from 'dayjs'
import SearchContainer from '@/components/SearchContainer'
// import Edit from './Edit.vue'

const rowData = ref()
const openEditModal = ref(false)
const formRef = ref()
const formState = ref({
  status: '',
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().add(7, 'day').format('YYYY-MM-DD')]
})
const onEdit = (record) => {
  openEditModal.value = true
  rowData.value = record
}
const onAdd = () => {
  openEditModal.value = true
  rowData.value = {}
}

const customRender = ({ record, column }) =>
  h('div', { class: 'inline-block w-full' }, [
    h('div', { class: 'border-b p-2 h-10 truncate', title: record[column.dataIndex] }, record[column.dataIndex]),
    h('div', { class: 'p-2 h-10 truncate', title: record[column.subDataIndex] }, record[column.subDataIndex])
  ])

const columns = [
  { title: '序号', dataIndex: 'xh', width: 50 },
  { title: '状态', dataIndex: 'status', width: 80 },
  { title: '手术日期', dataIndex: 'oprDate', width: 100 },
  { title: '手术时间', dataIndex: 'oprTime', width: 80 },
  { title: '手术房间', dataIndex: 'ssfj' },
  { title: '台次', dataIndex: 'tc' },
  { title: '手术名称', dataIndex: 'ssmc' },
  { title: '手术医生', dataIndex: 'oprDoctorName', width: 120 },
  { title: '麻醉医生', dataIndex: 'anaesDoctorName', width: 120 },
  { title: '一助', dataIndex: 'fnurseName', width: 120 },
  { title: '二助', dataIndex: 'snurseName', width: 120 },
  { title: '巡回护士', dataIndex: 'tourNurseName', width: 120 },
  { title: '器械护士', dataIndex: 'instrumenttNurseName', width: 120 },
  { title: '手术等级', dataIndex: 'oprLevelName', subTitle: '手术入路', subDataIndex: 'approachName', customCell: () => ({ class: '!p-0' }), customRender },
  { title: '手术分类', dataIndex: 'oprTypeName', subTitle: '切口等级', subDataIndex: 'cutLevelName', customCell: () => ({ class: '!p-0' }), customRender },
  { title: '麻醉方式', dataIndex: 'anaesName' },
  { title: '部位', dataIndex: 'partNameList' },
  {
    title: '联合手术1',
    dataIndex: 'jointOprName1',
    subTitle: '联合手术2',
    subDataIndex: 'jointOprName2',
    width: 130,
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  {
    title: '联合手术3',
    dataIndex: 'jointOprName3',
    subTitle: '联合手术4',
    subDataIndex: 'jointOprName4',
    width: 130,
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  {
    title: '联合手术5',
    dataIndex: 'jointOprName5',
    subTitle: '联合手术6',
    subDataIndex: 'jointOprName6',
    width: 130,
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  { title: '心电监护', dataIndex: 'isEcgName', subTitle: '复发', subDataIndex: 'isRecurrenceName', customCell: () => ({ class: '!p-0' }), customRender },
  { title: '特殊要求', dataIndex: 'specRequirements', subTitle: '嘱托', subDataIndex: 'advMemo', customCell: () => ({ class: '!p-0' }), customRender },
  {
    title: '预约医生/预约科室',
    dataIndex: 'aptmDoctorName',
    width: 160,
    subTitle: '预约时间',
    subDataIndex: 'aptmTime',
    customCell: () => ({ class: '!p-0' }),
    customRender
  },
  { title: '姓名', dataIndex: 'brName', subTitle: '性别', subDataIndex: 'brXb', customCell: () => ({ class: '!p-0' }), customRender },
  { title: '年龄', dataIndex: 'brAge', subTitle: '来源', subDataIndex: 'oprPathName', customCell: () => ({ class: '!p-0' }), customRender },
  { title: '卡号', dataIndex: 'brId', subTitle: '住院号', subDataIndex: 'keyLsh', customCell: () => ({ class: '!p-0' }), customRender }
]

const { loading, tableData, getData, pagination } = useTable({
  url: '/oprOperation/opr/getOperationDetailList',
  immediate: true,
  formatParams: () => {
    return {
      stdate: formState.value.dateRange?.[0],
      eddate: formState.value.dateRange?.[1],
      ssmc: formState.value.ssmc,
      anaesCdoe: formState.value.anaesCdoe,
      zjm: formState.value.zjm
    }
  },
  onSuccess: () => {
    tableData.value.forEach((e) => {
      if (e.oprPath === 0) {
        e.oprPathName = '门诊'
      } else if (e.oprPath === 1) {
        e.oprPathName = '住院'
      } else {
        e.oprPathName = '-'
      }
    })
  }
})
const bwFormat = (partNameList) => {
  if (partNameList && partNameList.length > 0) {
    const arr = partNameList.map((it) => {
      return it.partName
    })
    return arr?.join(',')
  } else {
    return ''
  }
}
</script>
